<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 高亮(百度富文本编辑器)  -->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript">
	//uediter代码高亮
    SyntaxHighlighter.all();
	
	
	function showOtherComment() {
		$(".otherComment").show() ;
	}
	
	function loadimage(){
		document.getElementById("randImage").src=
			"${pageContext.request.contextPath}/image.jsp?"+Math.random();
	}
	
	function submitData() {
		var flag = vaildInfo() ;
		if(flag) {
			var imageCode = $("#imageCode").val() ;
			var content = $("#content").val() ;
			var blogId = '${blog.blogId}' ;
			$.ajax({
				type:'POST',
				url:'${pageContext.request.contextPath}/comment/addInfo.do',
				data:{
					blogId:blogId,
					content:content,
					imageCode:imageCode,
					state:0
				},
				success:function(data) {
					alert(data.data) ;
				}
			}) ;
		}
	}
	function vaildInfo() {
		var flag = true ;
		var imageCode = $("#imageCode").val() ;
		var content = $("#content").val() ;
		if(content != null && content != "") {
			
		} else {
			alert("评论内容不能为空") ;
			flag = false ;
		}
		
		if(imageCode != null && imageCode != "") {
					
		} else {
			alert("验证码不能为空") ;
			flag = false ;
		}
		return flag ;
	}
</script>
</head>
<body>
	<div class="data_list">
  		<div class="data_list_title">
		<img src="${pageContext.request.contextPath}/static/images/blog_show_icon.png"/>
		博客信息
		</div>
		<div>
			<div class="blog_title"><h3><strong>${blog.title }</strong></h3></div>
			<div class="blog_share">
				<div class="bshare-custom"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
			</div>
			<div class="blog_info">
				发布时间：『 <fmt:formatDate value="${blog.releaseDate }" type="date" pattern="yyyy-MM-dd HH:mm"/>』&nbsp;&nbsp;博客类别：${blog.blogType.typeName }&nbsp;&nbsp;阅读(${blog.clickHit }) 评论(${blog.replyHit })
			</div>
			<div class="blog_content">
				${blog.content }
			</div>
			<div class="blog_keyWord">
				<font><strong>关键字:</strong></font>
				<c:choose>
					<c:when test="${keyWordList == null }">
						&nbsp;&nbsp;无
					</c:when>
					<c:otherwise>
						<c:forEach items="${keyWordList }" var="keyWord">
							&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_black">${keyWord }</a>&nbsp;&nbsp;
						</c:forEach>
					</c:otherwise>
				</c:choose>
			</div>
			<div class="blog_lastAndNextPage">
				${pageCode }
			</div>
		</div>
	</div>
	<div class="data_list">
  		<div class="data_list_title">
			<img src="${pageContext.request.contextPath}/static/images/comment_icon.png"/>
			评论信息
			<c:if test="${commentList.size() > 10 }">
				<a href="javascript:showOtherComment()" style="float: right;padding-right: 40px;">显示所有评论</a>
			</c:if>
		</div>
		<div class="commentDatas">
			<c:choose>
				<c:when test="${commentList.size() == 0 }">
					暂无评论
				</c:when>
				<c:otherwise>
					<c:forEach items="${commentList }" var="comment" varStatus="status">
						<c:choose>
							<c:when test="${status.index < 10 }">
								<div class="comment">
									<span>
										<font>
											${status.index + 1 }楼&nbsp;&nbsp;&nbsp;&nbsp;${comment.userIp }:
										</font>
										${comment.content }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										[&nbsp;<fmt:formatDate value="${comment.commentDate }" type="date" pattern="yyyy-MM-dd HH:mm"/>&nbsp;]
									</span>
								</div>
							</c:when>
							<c:otherwise>
								<div class="otherComment">
									<span>
										<font>
											${status.index + 1 }楼&nbsp;&nbsp;&nbsp;&nbsp;${comment.userIp }:
										</font>
										${comment.content }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										[&nbsp;<fmt:formatDate value="${comment.commentDate }" type="date" pattern="yyyy-MM-dd HH:mm"/>&nbsp;]
									</span>
								</div>
							</c:otherwise>
						</c:choose>
					</c:forEach>
				</c:otherwise>
			</c:choose>
		</div>
	</div>
	<div class="data_list" >
		<div class="data_list_title">
			<img src="${pageContext.request.contextPath}/static/images/publish_comment_icon.png"/>
			发表评论
		</div>
		<div class="publish_comment">
				<div>
					<textarea style="width: 100%" rows="3" id="content" name="content" placeholder="来说两句吧..."></textarea>
				</div>
				<div class="verCode">
					验证码：<input type="text" value="" name="imageCode"  id="imageCode" size="10"/>&nbsp;<img onclick="javascript:loadimage();"  title="换一张试试" name="randImage" id="randImage" src="${pageContext.request.contextPath}/image.jsp" width="60" height="20" border="1" align="absmiddle"> 
				</div>
				<div class="publishButton">
					<button class="btn btn-primary" type="button" onclick="submitData()">发表评论</button>
				</div>
			</form>
		</div>
	</div>
</body>
</html>